<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>冯利军网站</title>
    <style>
      body{
        background-color: #f5f5f5;
        margin: 0;
        padding: 0;
        font-family: "微软雅黑", sans-serif;
      }
      a{
        text-decoration:none;
      }
      /* 导航栏样式 */
      .block{
        width: 100%;
        height: 60px;
        background-color: #333333;
        display: flex;
        align-items: center;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        padding: 0 15px;
      }
      .block1{
        flex: 1;
        display: flex;
        gap: 25px;
        align-items: center;
        margin-left: 20px;
      }
      .block1 a {
        color: #fff;
        font-size: 16px;
        font-weight: 500;
        transition: color 0.2s;
      }
      .block1 a:hover {
        color: #4299e1;
      }
      /* 登录按钮样式 */
      .btn {
        width: 80px;
        height: 36px;
        background: linear-gradient(135deg, #4299e1, #3182ce);
        border: none;
        border-radius: 18px;
        color: white;
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        box-shadow: 0 3px 8px rgba(66, 153, 225, 0.25);
        transition: all 0.3s ease;
        outline: none;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .btn:hover {
        background: linear-gradient(135deg, #3182ce, #2b6cb0);
        box-shadow: 0 4px 12px rgba(66, 153, 225, 0.35);
        transform: translateY(-2px);
      }
      .btn:active {
        transform: translateY(0);
        box-shadow: 0 2px 6px rgba(66, 153, 225, 0.2);
      }
      /* 轮播图样式 */
      .banner {
        width: 100%;
        height: 220px;
        overflow: hidden;
        border-radius: 12px;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        margin-bottom: 20px;
      }
      .banner img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.5s ease;
      }
      .banner img:hover {
        transform: scale(1.03);
      }
      /* 功能模块样式 */
      .func-modules {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        padding: 20px 10px;
        background-color: #fff;
        border-radius: 12px;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
        margin-bottom: 25px;
      }
      .module-item {
        width: 25%;
        text-align: center;
        margin-bottom: 15px;
      }
      .module-icon {
        width: 70px;
        height: 70px;
        background: linear-gradient(135deg, #4299e1, #3182ce);
        border-radius: 20px;
        margin: 0 auto 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 28px;
        box-shadow: 0 3px 8px rgba(66, 153, 225, 0.25);
        transition: all 0.3s ease;
      }
      .module-icon:hover {
        transform: translateY(-3px);
        box-shadow: 0 5px 12px rgba(66, 153, 225, 0.35);
      }
      .module-name {
        font-size: 14px;
        color: #333;
        font-weight: 500;
      }
      /* 新闻列表样式 */
      .news-section {
        background-color: #fff;
        border-radius: 12px;
        padding: 20px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        margin-bottom: 25px;
      }
      .section-title {
        font-size: 20px;
        font-weight: bold;
        color: #333;
        margin-bottom: 18px;
        padding-bottom: 10px;
        border-bottom: 2px solid #4299e1;
        text-align: left;
      }
      .news-list {
        list-style: none;
        padding: 0;
      }
      .news-item {
        padding: 12px 0;
        border-bottom: 1px solid #f0f0f0;
      }
      .news-item:last-child {
        border-bottom: none;
      }
      .news-item a {
        color: #333;
        font-size: 15px;
        line-height: 1.6;
        display: block;
        transition: color 0.2s;
      }
      .news-item a:hover {
        color: #4299e1;
      }
      /* 内容区域适配 */
      .content1, .content2, .content3 {
        width: 100%;
        padding: 0 15px;
        box-sizing: border-box;
        margin-top: 20px;
      }
      /* 底部状态栏样式 */
      .footer {
        background-color: #333;
        color: #ccc;
        padding: 20px 15px;
        text-align: center;
        font-size: 14px;
        border-top: 1px solid #444;
        margin-top: 20px;
      }
      .footer p {
        margin-bottom: 8px;
      }
      .footer-links {
        display: flex;
        justify-content: center;
        gap: 15px;
      }
      .footer-links a {
        color: #ccc;
        text-decoration: none;
        transition: color 0.2s;
      }
      .footer-links a:hover {
        color: #4299e1;
      }
    </style>
</head>
<body>
    <div class="block">
      <div class="block1">
        <a href="#">首页</a>
        <a href="#">功能</a>
        <a href="#">咨询</a>
        <a href="#">关于</a>
      </div>
    <a href="login.html">
    <button class="btn">登录</button>
</a>
</div>
    <!-- content1 轮播图 -->
    <div class="content1">
      <div class="banner">
        <img src="https://picsum.photos/1200/400" alt="首页轮播图">
      </div>
    </div>
    <!-- content2 功能模块 -->
    <div class="content2">
      <div class="func-modules">
        <div class="module-item">
          <div class="module-icon">📱</div>
          <div class="module-name">手机服务</div>
        </div>
        <div class="module-item">
          <div class="module-icon">📚</div>
          <div class="module-name">学习资源</div>
        </div>
        <div class="module-item">
          <div class="module-icon">🎵</div>
          <div class="module-name">音乐专区</div>
        </div>
        <div class="module-item">
          <div class="module-icon">🎬</div>
          <div class="module-name">影视推荐</div>
        </div>
      </div>
    </div>
    <!-- content3 新闻列表 -->
    <div class="content3">
      <div class="news-section">
        <h2 class="section-title">最新资讯</h2>
        <ul class="news-list">
          <li class="news-item"><a href="#">前端开发新趋势：Flex布局与Grid布局的实战应用</a></li>
          <li class="news-item"><a href="#">手机端网页适配技巧，让你的页面在所有设备上流畅显示</a></li>
          <li class="news-item"><a href="#">HTML5新特性详解，这些功能让网页交互更丰富</a></li>
        </ul>
      </div>
    </div>
    <div class="footer">
      <p>© 2025 我的第一个网站 版权所有</p>
      <div class="footer-links">
        <a href="#">隐私政策</a>
        <a href="#">用户协议</a>
        <a href="#">联系我们</a>
      </div>
    </div>
</body>
</html>
